<template>
  <div>
    <el-form ref="form" :model="searchData" label-width="70px" :inline="true" v-if="formItems.length">
      <el-form-item v-for="(item, index) in formItems" :key="index" :label="item.label" :prop="item.key" :label-width="item.width ? item.width : '70px'">
        <el-input v-model="searchData[item.key]" v-if="item.type === 'input'"/>
        <el-select v-model="searchData[item.key]" v-else-if="item.type === 'select'">
          <el-option v-for="(option, i) in item.options" :key="i" :value="option.id" :label="option.name"/>
        </el-select>
        <el-select multiple v-model="searchData[item.key]" v-else-if="item.type === 'selects'">
          <el-option v-for="(option, i) in item.options" :key="i" :value="option.id" :label="option.name"/>
        </el-select>
        <el-select filterable v-model="searchData[item.key]" v-else-if="item.type === 'select-filterable'">
          <el-option v-for="(option, i) in item.options" :key="i" :value="option.id" :label="option.name"/>
        </el-select>
        <el-date-picker
          v-else-if="item.type === 'times'"
          v-model="searchData[item.key]"
          value-format="yyyy-MM-dd HH:mm:ss"
          type="datetimerange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期">
        </el-date-picker>
        <el-date-picker
          v-else-if="item.type === 'times-option'"
          v-model="searchData[item.key]"
          :picker-options="pickerOptions"
          value-format="yyyy-MM-dd HH:mm:ss"
          type="datetimerange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期">
        </el-date-picker>
        <el-date-picker
          v-else-if="item.type === 'time'"
          v-model="searchData[item.key]"
          value-format="yyyy-MM-dd HH:mm:ss"
          type="datetime"
          placeholder="选择日期">
        </el-date-picker>
        <el-date-picker
          v-else-if="item.type === 'time-one'"
          v-model="searchData[item.key]"
          value-format="yyyy-MM-dd"
          type="date"
          placeholder="选择日期">
        </el-date-picker>
        <el-cascader
          v-else-if="item.type === 'address'"
          :options="options"
          v-model="selectedOptions"
          @change="handleChange">
        </el-cascader>
      </el-form-item>
      <el-form-item label-width="0px" v-if="formItems.length">
        <el-button type="primary" @click="toSearch">查询</el-button>
        <el-button type="danger" @click="reset">重置</el-button>
      </el-form-item>
      <el-form-item label-width="0px" v-if="check">
        <el-checkbox v-model="checked" @change="toSearch">查看已删除</el-checkbox>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import {regionData, CodeToText} from 'element-china-area-data'
import {getLastMouth} from '@/utils/getList'
export default {
  name: 'search',
  data () {
    return {
      searchData: {},
      options: regionData,
      selectedOptions: [],
      pickerOptions: {
        shortcuts: [
          {
            text: '周榜',
            onClick (picker) {
              const end = new Date()
              const start = new Date(end.getFullYear(), end.getMonth(), end.getDate() - end.getDay() + 1)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '月榜',
            onClick (picker) {
              let mouthArr = getLastMouth()
              picker.$emit('pick', [new Date(mouthArr[0]), new Date(mouthArr[1])])
            }
          },
          {
            text: '年榜',
            onClick (picker) {
              let mouthArr = getLastMouth()
              let year = new Date().getFullYear()
              let startStr = `${year}-1-1 00:00:00`
              const start = new Date(startStr)
              picker.$emit('pick', [start, new Date(mouthArr[1])])
            }
          },
          {
            text: '总榜',
            onClick (picker) {
              let mouthArr = getLastMouth()
              const start = new Date('2018-01-01')
              picker.$emit('pick', [start, new Date(mouthArr[1])])
            }
          }
        ]
      },
      checked: false
    }
  },
  methods: {
    toSearch () {
      this.$emit('search')
    },
    search () {
      let params = {}
      Object.keys(this.searchData).forEach(key => {
        if (this.searchData[key]) {
          if (key === 'times') {
            params.starttime = this.searchData[key][0]
            params.endtime = this.searchData[key][1]
          } else if (key === 'times2') {
            params.startcreate = this.searchData[key][0]
            params.endcreate = this.searchData[key][1]
          } else if (this.searchData[key] instanceof Array && this.searchData[key].length) {
            params[key] = this.searchData[key].join(',')
          } else {
            params[key] = this.searchData[key]
          }
        }
      })
      if (!this.checked) {
        params.delflag = '0'
      }
      return params
    },
    reset () {
      this.$refs['form'].resetFields()
      this.selectedOptions = []
    },
    handleChange (value) {
      let address = []
      value.forEach(item => {
        address.push(CodeToText[item])
      })
      this.searchData.address = address.join('-')
    }
  },
  props: ['formItems', 'check'],
  created () {
    this.formItems.forEach(item => {
      this.$set(this.searchData, item.key, '')
    })
  }
}
</script>

<style scoped>

</style>
